<template>
  <div v-if="isMobile()" class="mobile-common-query card-item">
    <div class="query-item">
      <span>城市：</span>
      <el-segmented v-model="travelStore.querySpot.category"
                    :options="queryCategoryList"
                    @change="queryTravelSegmented"/>
    </div>
  </div>

  <div v-else class="common-query">
    <el-select v-model="travelStore.queryDateType"
               @change="travelStore.refreshInfo()"
               style="width: 120px;align-self: center;">
      <el-option v-for="(item, index) in dateTypeOptions" :key="index"
                 :label="item.label" :value="item.value"/>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import { useTravelStore } from '@/store/travel.ts'
import { isMobile } from 'vue3-common/utils/layoutUtil'
import { ref, onMounted } from 'vue'
import { ICategory } from '@/types'

const travelStore = useTravelStore()

const queryCategoryList = ref([] as ICategory[])

const dateTypeOptions = [{
  label: '按月选择',
  value: 'month'
},
{
  label: '按年选择',
  value: 'year'
}]

onMounted(async () => {
  await travelStore.queryTravelCategory()
  initCategoryList()
})

const initCategoryList = () => {
  queryCategoryList.value = []
  queryCategoryList.value.push({
    label: '全部',
    value: ''
  })
  travelStore.travelCategoryList.forEach((item) => {
    queryCategoryList.value.push({
      label: item,
      value: item
    })
  })
}

const queryTravelSegmented = async () => {
  travelStore.pageInfo = {
    currentPage: 1,
    pageSize: 3,
    totalSize: 1
  }
  travelStore.travelSpotList = []
  await travelStore.queryMobileTravelSpotList()
}
</script>
